<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/My'})" class="return"></a>
			邀请列表
		</div>
		<div class="overlay" style="padding-top: 20px;">
			<div class="overlay-content scrolling" align="center">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<van-cell-group v-for="item in list" :key="item.id">
							<van-field readonly :label="item.userName" :placeholder="'ID:' + item.uuid" input-align="right" />
						</van-cell-group>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	import { safety } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				list: [], // 邀请列表
				size: 10, // 每页数量
				total: '', // 总数量
				listLength: '', // 当前总数量
				isLoading: false,
				finished: false,
				loading: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			
		},
		mounted() {
			this.sure();
		},
		methods: {
			sure() {
				safety.getInvite_users({
					current: 1,
					size: this.size
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			onRefresh() { // 下拉刷新
				this.sure()
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.sure()
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			}
		}
	}
</script>

<style lang="less" scoped>
	.head~.overlay {
		top: 44px;
	}
	
	.van-cell {
		background-color: #344B7D;
		color: #FFFFFF;
		font-size: 15px;
		padding: 15px;
		border-bottom: 1px solid #1a2e58;
	}
	
	.van-cell:not(:last-child)::after {
		border-bottom: 1px solid #1a2e58;
		left: 0px;
		right: 0px;
	}
	
	/deep/ .van-field__label {
		text-align: left;
	}
	
	/deep/ .van-hairline--top-bottom::after {
		border: none;
	}
</style>